<template>
  <h1>X:{{ mouse.x }} <br>
      Y:{{ mouse.y }}
  </h1>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated, ref,
  onUnmounted
} from 'vue'
let mouse = ref({
  x:0,y:0
})
const move = (e)=>{
  mouse.value.x = e.pageX
  mouse.value.y = e.pageY
}
onMounted(()=>{
  document.addEventListener('mousemove',move)
})
onUnmounted(()=>{
  document.removeEventListener('mousemove',move)
})


</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: "App"
}
</script>